<template>
    <BaseDialog :loading="loading" destroy-on-close @confirm="save" @close="close" confirmText="保存" v-model="isShow"
                :title="title">
        <el-form
                ref="formRef"
                :model="state.dataForm"
                :rules="rules"
                label-width="120px"
        >
            <el-row>
                <el-col :span="11">
                    <el-form-item label="字典类型名称" prop="dictTypeName">
                        <el-input placeholder="请输入字典类型名称" v-model="state.dataForm.dictTypeName"/>
                    </el-form-item>
                </el-col>
                <el-col :offset="2" :span="11">
                    <el-form-item label="字典类型编号" prop="dictTypeCode">
                        <el-input placeholder="请输入字典类型编号" v-model="state.dataForm.dictTypeCode"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="是否启用" prop="enabled">
                        <el-switch :active-value="1" :inactive-value="2" v-model="state.dataForm.enabled"/>
                    </el-form-item>
                </el-col>
                <el-col :offset="2" :span="11">
                    <el-form-item label="序号" prop="orderNum">
                        <el-input-Number :min="1" :max="999999999" v-model="state.dataForm.orderNum"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div>
            <div class="flex flex-row-reverse mb-1.5">
                <el-button type="primary" @click="addDict">新增</el-button>
                <el-button type="primary" @click="setValue">设置Value</el-button>
            </div>
            <div>
                <BaseEditTable :tableAttr="{border: true}" ref="tableRef" :columns="columns"
                               >
                    <template #operate="scope,item">
                        <el-button type="danger" @click="delDict(scope.$index)" size="small">删除</el-button>
                    </template>
                </BaseEditTable>
            </div>
        </div>
    </BaseDialog>
</template>

<script setup lang="ts">
import {nextTick, onMounted, reactive, ref} from "vue";

import {ENABLED} from "/@/utils/dict/Dict";
import {insertDictType, updateDictType} from "/@/api/system/DictApi";
import {DictDataModel, DictTypeModel} from "/@/api/system/model/DictModel";
import {useDictStore} from "/@/store/modules/dict";
import {Column} from "/@/components/Base/BaseEditTable/ts";

const enableOptions = ref<DictDataModel[]>([])
const dictTagOptions = ref<DictDataModel[]>([])
const emit = defineEmits(["load"])
const formRef = ref()
const state = reactive({
    dataForm: {
        dictTypeId: '',
        dictTypeCode: '',
        dictTypeName: '',
        enabled: 1,
        orderNum: 1,
        dict: []
    } as DictTypeModel
})
const tableRef = ref()
const rules = {
    dictTypeCode: [
        {required: true, message: '字典类型编号不能为空', trigger: 'blur'},
        {min: 1, max: 64, message: '字典类型编号长度为1到64个字符', trigger: 'blur'},
    ],
    dictTypeName: [
        {required: true, message: '字典类型名称不能为空', trigger: 'blur'},
        {min: 1, max: 64, message: '字典类型名称长度为1到64个字符', trigger: 'blur'},
    ]
}
const tableRules = {
    label: [
        {
            required: true, message: '字典名称不能为空', trigger: 'blur'
        },
        {
            min: 1, max: 64, message: '字典名称长度为1到64个字符', trigger: 'blur'
        }
    ],
    value: [
        {
            required: true, message: '字典值不能为空', trigger: 'blur'
        },
        {
            min: 1, max: 64, message: '字典值长度为1到64个字符', trigger: 'blur'
        }
    ]
}
const isShow = ref(false)
const loading = ref(false)
const title = ref('')
const init = (titleValue: string, data: DictTypeModel) => {
    title.value = titleValue
    isShow.value = true
    nextTick(() => {
        if (data && data.dictTypeId) {
            state.dataForm = data
            tableRef.value.setData(state.dataForm.dict)
        }
        tableRef.value.setRules(tableRules)
        formRef.value.resetFields()
    })
}
const setValue = async () => {
    dictTagOptions.value[1].label = "不存在"
}
const addDict = () => {
    tableRef.value.add({
        label: '',
        value: '',
        enabled: '',
        orderNum: 1,
        tag: 'primary',

    })
}
const delDict = (index: number) => {
    tableRef.value.remove(index)
}
/**
 * 保存字典
 */
const save = async () => {
    await formRef.value.validate()
    await tableRef.value.validate()
    state.dataForm.dict = tableRef.value.getData()
    loading.value = true
    if (state.dataForm.dictTypeId) {
        await updateDictType(state.dataForm, () => {
            loading.value = false
        })
    } else {
        await insertDictType(state.dataForm, () => {
            loading.value = false
        })
    }
    emit("load")
    close()

}
const close = () => {
    state.dataForm = {
        dictTypeId: '',
        dictTypeCode: '',
        dictTypeName: '',
        enabled: 1,
        orderNum: 1,
        dict: []
    }
    isShow.value = false
}
const columns: Column[] = [
    {
        label: '字典名称',
        align: 'left',
        headerAlign: 'left',
        prop: 'label',
        component: "Input",
        componentAttr: {
            placeholder: '请输入字典名称',
            options: []
        }
    },
    {
        label: '字典值',
        prop: 'value',
        align: 'left',
        headerAlign: 'left',
        component: 'Input',
        componentAttr: {
            placeholder: '请输入字典值',
            options: []
        }
    },
    {
        label: '字典标签',
        prop: 'tag',
        align: 'center',
        headerAlign: 'center',
        component: 'Select',
        componentAttr: {
            placeholder: '请输入字典值',
            options: dictTagOptions
        }
    },
    {
        label: '是否启用',
        prop: 'enabled',
        component: 'Switch',
        align: 'center',
        headerAlign: 'center',
        componentAttr: {
            options: enableOptions,
            activeValue: ENABLED.YES,
            inactiveValue: ENABLED.NO
        }
    },
    {
        label: '排序',
        prop: 'orderNum',
        align: 'center',
        headerAlign: 'center',
        component: 'InputNumber',
        componentAttr: {
            placeholder: '请输入字典值',
            min: 1,
            max: 99999999,
        }
    },
    {
        label: '操作',
        align: 'center',
        headerAlign: 'center',
        prop: 'operate',
        custom: 'operate'
    }
]

onMounted(async () => {
    let dictStore = useDictStore();
    enableOptions.value = await dictStore.getDict('enable_dict')
    dictTagOptions.value = await dictStore.getDict('dict_tag')
})
defineExpose({init})
</script>

<style scoped>

</style>